// 初始化页面
window.onload = function() {
    console.log('答疑页面已加载');
    
    // 初始化搜索功能
    initSearchFunctionality();
    
    // 初始化卡片数据
    initCards();
};

// 初始化卡片数据
function initCards(filteredCards = null) {
    const container = document.querySelector('.container');
    if (!container) {
        console.error('无法找到卡片容器 .container');
        return;
    }
    
    if (filteredCards) {
        // 如果传入了过滤后的卡片列表，直接渲染
        renderCards(container, filteredCards);
    } else {
        // 模拟获取卡片数据
        fetchCards().then(cards => {
            renderCards(container, cards);
        });
    }
}

// 模拟获取卡片数据
function fetchCards() {
    return new Promise((resolve) => {
        const mockCards = [
            {
                id: 1,
                title: '卡片标题 1',
                content: '这是卡片 1 的描述内容。',
                author: '作者1',
                image: '../img/答疑.png'
            },
            {
                id: 2,
                title: '卡片标题 2',
                content: '这是卡片 2 的描述内容。',
                author: '作者2',
                image: '../img/答疑.png'
            },
            {
                id: 3,
                title: 'Python入门问题',
                content: '如何快速入门Python编程？有什么推荐的学习资源吗？',
                author: '新手学习',
                image: '../img/答疑.png'
            },
            {
                id: 4,
                title: '算法题解析',
                content: '想请教一道动态规划的经典题目解法。',
                author: '算法爱好者',
                image: '../img/答疑.png'
            }
        ];
        resolve(mockCards);
    });
}

// 渲染卡片列表
function renderCards(container, cards) {
    container.innerHTML = '';
    
    cards.forEach(card => {
        const cardElement = document.createElement('div');
        cardElement.className = 'card';
        cardElement.setAttribute('data-card-id', card.id);
        
        cardElement.innerHTML = `
            <img src="${card.image}" alt="${card.title}">
            <div class="card-text">
                <h2>${card.title}</h2>
                <p>${card.content}</p>
                <p class="author">${card.author}</p>
            </div>
        `;
        
        // 添加卡片点击跳转功能
        cardElement.style.cursor = 'pointer';
        cardElement.addEventListener('click', function() {
            window.location.href = `post-detail.html?id=${card.id}`;
        });
        
        container.appendChild(cardElement);
    });
}

// 初始化搜索功能
function initSearchFunctionality() {
    // 查找已存在的搜索框元素
    const searchBox = document.querySelector('.search-box');
    const searchSvgs = document.querySelectorAll('.Search-svg'); // 获取所有搜索图标
    
    // 检查必要的元素是否存在
    if (!searchBox) {
        console.error('未找到搜索框元素');
        return;
    }
    
    // 向搜索框添加输入框
    searchBox.innerHTML = `
        <input type="text" id="searchInput" placeholder="输入标题、内容或作者搜索" />
    `;
    
    // 为所有搜索图标添加点击事件和指针样式
    searchSvgs.forEach(svg => {
        svg.style.cursor = 'pointer';
        svg.addEventListener('click', performSearch);
    });
    
    // 为输入框添加回车搜索功能
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
        searchInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                performSearch();
            }
        });
    }
}

// 执行搜索操作
function performSearch() {
    const searchInput = document.getElementById('searchInput');
    if (!searchInput) return;
    
    const searchValue = searchInput.value.trim();
    if (!searchValue) {
        alert('请输入搜索内容');
        return;
    }
    
    // 显示加载状态
    alert('搜索中，请稍候...');
    
    // 判断是搜索帖子ID还是作者ID
    // 如果输入的是纯数字，则尝试作为帖子ID搜索
    if (!isNaN(searchValue) && searchValue !== '' && searchValue.indexOf('.') === -1) {
        const postId = parseInt(searchValue);
        console.log(`搜索帖子ID: ${postId}`);
        
        // 调用后端API根据帖子ID查找帖子内容
        fetch(`/api/post/findPost/${postId}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
                // 如果需要认证，可以添加token
                // 'Authorization': 'Bearer ' + token
            }
        })
        .then(response => {
            console.log('搜索请求已发送，等待响应...');
            
            // 检查响应状态
            if (response.status === 200) {
                return response.json();
            } else if (response.status === 401) {
                throw new Error('未授权，请先登录');
            } else if (response.status === 403) {
                throw new Error('没有权限访问此内容');
            } else if (response.status === 404) {
                throw new Error('未找到该帖子');
            } else {
                throw new Error(`搜索失败: 服务器返回 ${response.status}`);
            }
        })
        .then(data => {
            // 处理成功响应
            console.log('搜索成功，服务器返回:', data);
            
            if (data && data.code === 200 && data.data) {
                // 将API返回的帖子数据转换为前端显示所需的格式
                const formattedCard = {
                    id: postId,
                    title: data.data.articalName || '无标题',
                    content: data.data.content || '',
                    author: data.data.author || '未知作者',
                    image: '../img/答疑.png'
                };
                
                initCards([formattedCard]);
            } else {
                alert(data && data.message || '未找到匹配的帖子');
            }
        })
        .catch(error => {
            console.error('搜索失败:', error);
            alert('搜索失败: ' + error.message);
        });
    } else {
        // 否则作为作者ID搜索
        console.log(`搜索作者ID: ${searchValue}`);
        
        // 调用后端API根据作者ID查找其所有帖子
        fetch(`/api/post/findId/${encodeURIComponent(searchValue)}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
                // 如果需要认证，可以添加token
                // 'Authorization': 'Bearer ' + token
            }
        })
        .then(response => {
            console.log('搜索请求已发送，等待响应...');
            
            // 检查响应状态
            if (response.status === 200) {
                return response.json();
            } else if (response.status === 401) {
                throw new Error('未授权，请先登录');
            } else if (response.status === 403) {
                throw new Error('没有权限访问此内容');
            } else if (response.status === 404) {
                throw new Error('未找到该作者或其帖子');
            } else {
                throw new Error(`搜索失败: 服务器返回 ${response.status}`);
            }
        })
        .then(data => {
            // 处理成功响应
            console.log('搜索成功，服务器返回:', data);
            
            if (data && data.code === 200 && data.data && data.data.length > 0) {
                // 由于接口只返回帖子ID数组，需要为每个ID创建一个简单的卡片对象用于显示
                const formattedCards = data.data.map(postId => ({
                    id: postId,
                    title: `帖子 #${postId}`,
                    content: `作者: ${searchValue} 的帖子内容`,
                    author: searchValue,
                    image: '../img/答疑.png'
                }));
                
                initCards(formattedCards);
            } else {
                alert(data && data.message || '未找到该作者的帖子');
            }
        })
        .catch(error => {
            console.error('搜索失败:', error);
            alert('搜索失败: ' + error.message);
        });
    }
}